<template>
<div class="col-md-12">
  <div class="col-md-8" id="lcdbg">
  </div>
  <div class="col-md-4">
    <form class="form-horizontal">
      <div class="form-group">
        <label class="col-sm-3 control-label">{{$t('lcd.title')}}</label>
        <div class="col-sm-9">
          <input type="text" class="form-control" v-model="title.text">
        </div>
      </div> 
      <div class="form-group">
        <label class="col-sm-3 control-label">{{$t('lcd.color')}}</label>
        <div class="col-sm-9">
          <vc-slider :colors.sync="title.color"></vc-slider>
        </div>
      </div>       
      <div class="form-group">
        <label class="col-sm-3 control-label">{{$t('lcd.fontFamily')}}</label>
        <div class="col-sm-9">
          <select class="form-control" v-model="title.fontFamily">
            <option v-for="option in fontFamilyOptions" :value="option">{{option}}</option>
          </select>
        </div>
      </div> 
      <div class="form-group">
        <label class="col-sm-3 control-label">{{$t('lcd.fontSize')}}</label>
        <div class="col-sm-9">
          <input type="range" class="form-control" v-model="title.fontSize" min="20" max="200" step="5">
        </div>
      </div> 
      <div class="form-group">
        <div class="col-sm-offset-3 col-sm-9">
          <a class="btn btn-default" href="javascript:;" :class="{active: title.bold}" @click.prevent="title.bold = !title.bold">
            <i class="fa fa-bold"></i>
          </a>
          <a class="btn btn-default" href="javascript:;" :class="{active: title.italic}" @click.prevent="title.italic = !title.italic">
            <i class="fa fa-italic"></i>
          </a>
        </div>
      </div>           
      <hr /> 
      <div class="form-group">
        <label class="col-sm-3 control-label">{{$t('lcd.bgColor')}}</label>
        <div class="col-sm-9">
          <vc-slider :colors.sync="bg.color"></vc-slider>
        </div>
      </div>       
      <div class="form-group">
        <label class="col-sm-3 control-label">{{$t('lcd.image')}}</label>
        <div class="col-sm-9">
        <div class="input-group"> 
          <input type="text" class="form-control" v-model="fileName" readonly>
          <span class="input-group-btn">
            <span class="btn btn-primary btn-file">
              {{ $t("common.browse") }}&hellip;
              <input type="file" v-el:container @change.prevent="onImgChange" :accept="accept">
            </span>
          </span>
        </div>
        </div>
      </div>
      <div class="form-group">
        <label class="col-sm-3 control-label">{{$t('lcd.fit')}}</label>
        <div class="col-sm-9">
          <select class="form-control" v-model="bgImg.fit">
          <option v-for="option in fitOptions" :value="option.value">{{option.text}}</option>
          </select>
        </div>
      </div>      
      <div class="form-group">
        <div class="col-sm-offset-3 col-sm-9">
          <button type="button" class="btn btn-default" :attr="{disabled: state != ''}" @click.prevent="onSubmit">{{ $t("common.upload") }}</button>
        </div>
      </div>
    </form>    
  </div>
</div>
</template>

<script>
import ebus from 'libs/ebus.js'
import {LcdPreview} from 'libs/canvas.js'
import {printObj, readableSize} from 'libs/utils.js'

export default {
  props: {
    accept: {
      type: String,
      default: 'image/jpeg,image/png,image/bmp'
    },
    multiScreen: {
      type: Object,
      default: function() {
        return {
          x: 1,
          y: 1
        }
      }
    },
    doSubmit: {
      type: Function,
      required: true
    }
  },
  data: function() {
    return {
      title: {
        x: 0,
        y: 0,
        text: 'example',
        bold: false,
        italic: false,
        fontFamily: 'Serif',
        fontSize: 100,
        color: {
          hex: '#6C2D86'    
        }
      },
      bg: {
        color: {
          hex: '#79D285'    
        }
      },
      bgImg: {
        img: '',
        fit: 'stretch'
      },
      fileName: '',
      fontFamilyOptions: [
        'Serif',
        'Sans-serif',
        'Monospace',
        'Georgia',
        'Arial',
        'Courier New'
      ],
      fitOptions: [{
        value: 'stretch',
        text: this.$t("lcd.stretch")
      }, {
        value: 'center',
        text: this.$t("lcd.center")
      }, {
        value: 'adapt',
        text: this.$t("lcd.adapt")
      }]
    }
  },
  computed: {
    width () {
      return 1920 * this.multiScreen.x
    },
    height () {
      return 1080 * this.multiScreen.y
    }
  },
  methods: {
    onSubmit () {
      var offContainer = document.createElement("div")
      var lcdbg = new LcdPreview()
      lcdbg.init(offContainer, {
        width: this.width,
        height: this.height,
        scale: 1 
      })
      lcdbg.updateBg(this.bg)
      lcdbg.updateBgImg(this.bgImg)
      lcdbg.updateTitle({
        x: this.title.x / this.scale,
        y: this.title.y / this.scale,
        text: this.title.text,
        bold: this.title.bold,
        italic: this.title.italic,
        fontFamily: this.title.fontFamily,
        fontSize: this.title.fontSize / this.scale,
        color: {
          hex: this.title.color.hex  
        }        
      })

      this.doSubmit(lcdbg, function() {
        lcdbg.uninit()
      })
    },
    onImgChange () {
      let file = this.$els.container.files[0]
      this.fileName = file.name
      var reader = new FileReader()
      reader.onload = function(e) {
        var image = new Image()
        image.src = e.target.result
        image.onload = function(e) {
          this.bgImg.img = image
        }.bind(this)
      }.bind(this)
      reader.readAsDataURL(file)     
    },
    onTitleChange () {
      this.preview.updateTitle(this.title)
    },
    onBgChange () {
      this.preview.updateBg(this.bg)
    },
    onBgImgChange () {
      this.preview.updateBgImg(this.bgImg)
    },
    resetBgCfg () {
      this.bg.color.hex = '#79D285'
    },
    resetBgImgCfg () {
      this.bgImg.img = ''
      this.bgImg.fit = 'stretch'
    },
    resetTitleCfg () {
      this.title.x = 0
      this.title.y = 0
      this.title.text = 'example'
      this.title.bold = false
      this.title.italic = false
      this.title.fontFamily = 'Serif'
      this.title.fontSize = 100
      this.title.color.hex = '#6C2D86'
    },
    resetCfg () {
      this.resetBgCfg()
      this.resetBgImgCfg()
      this.resetTitleCfg()
    },
    drawPreview () {
      this.resetCfg()
      let showWidth = window.innerWidth * 5 / 8
      this.scale = showWidth / this.width
      this.preview.init('lcdbg', {
        width: this.width * this.scale,
        height: this.height * this.scale,
        scale: this.scale    
      })
      this.preview.updateBg(this.bg)
      this.preview.updateBgImg(this.bgImg)
      this.preview.updateTitle(this.title)
      this.preview.setMultiScreen(this.multiScreen)
    }
  },
  ready () {
    this.preview = new LcdPreview()
    ebus.on('draw-preview', this.drawPreview)
    this.$watch('title', this.onTitleChange, {deep: true})
    this.$watch('bg', this.onBgChange, {deep: true})
    this.$watch('bgImg', this.onBgImgChange, {deep: true})
  },
  beforeDestroy() {
    this.preview.uninit()
  }
}
</script>

<style>
.btn-file {
  position: relative;
  overflow: hidden;
}
.btn-file input[type=file] {
  position: absolute;
  top: 0;
  right: 0;
  min-width: 100%;
  min-height: 100%;
  font-size: 100px;
  text-align: right;
  filter: alpha(opacity=0);
  opacity: 0;
  background: red;
  cursor: inherit;
  display: block;
}
input[readonly] {
  background-color: white !important;
  cursor: text !important;
}
</style>